<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>学生基本信息</title>
    <link rel="stylesheet" th:href="@{/css/layui.css}" media="all">
    <script th:src="@{/js/layui.js}"></script>
    <!-- Fav  Icon Link -->
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <!-- themify icons CSS -->
    <link rel="stylesheet" th:href="@{/css/themify-icons.css}">
    <!-- Animations CSS -->
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <!-- Main CSS -->
    <link rel="stylesheet" th:href="@{/css/styles.css}">
    <link rel="stylesheet" th:href="@{/css/green.css}" id="style_theme">
    <link rel="stylesheet" th:href="@{/css/responsive.css}">
    <!-- morris charts -->
    <link rel="stylesheet" th:href="@{/charts/css/morris.css}">
    <!-- jvectormap -->
    <link rel="stylesheet" th:href="@{/css/jquery-jvectormap.css}">
    <link rel="stylesheet" th:href="@{/datatable/dataTables.bootstrap4.min.css}">
    <script th:src="@{/js/modernizr.min.js}"></script>
</head>
<body>
<!-- Pre Loader -->
<div class="loading">
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>

<div class="container">

    <div class="row">
        <!-- Widget Item -->
        <div class="col-md-12">
            <div class="widget-area-2 lochana-box-shadow">
                <h3 class="widget-title">填写注册信息</h3>
                <form class="layui-form" action="/login/registerUser" method="post">
                    <div class="layui-form-item">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="user_name"><font color="red">*</font>用户名</label>
                                <input type="text" class="form-control" placeholder="用户名" id="user_name"
                                       name="user_name"  lay-verify="required|isExist" autocomplete="off">
                            </div>
                            <div class="form-group col-md-6">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="user_pwd"><font color="red">*</font>登录密码</label>
                                <input type="password" class="form-control" placeholder="登录密码" id="user_pwd"
                                       name="user_pwd"  lay-verify="required|pwd"  autocomplete="off">
                            </div>
                            <div class="form-group col-md-6">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="reuser_pwd"><font color="red">*</font>确认密码</label>
                                <input type="password" class="form-control" placeholder="确认密码" id="reuser_pwd"
                                       name="reuser_pwd"  lay-verify="required|pwd|confirmPass"  autocomplete="off">
                            </div>
                            <div class="form-group col-md-6">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="true_name"><font color="red">*</font>真实姓名</label>
                                <input class="form-control" id="true_name" name="true_name" placeholder="真实姓名"  lay-verify="required|username" autocomplete="off">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="link_tel"><font color="red">*</font>手机号码</label>
                                <input type="text"  class="form-control"
                                       id="link_tel" name="link_tel" lay-verify="required|phone" placeholder="手机号码"   autocomplete="off">

                            </div>
                            <div class="form-group col-md-6">
                                <label for="email">邮箱</label>
                                <input type="text" placeholder="邮箱" class="form-control" id="email"
                                       name="email" lay-verify="email" autocomplete="off"  >

                            </div>
                            <div class="form-group col-md-6">
                                <label for="link_addre">家庭住址</label>
                                <input type="text" placeholder="家庭住址" class="form-control"
                                       id="link_addre" name="link_addre"  autocomplete="off"  >

                            </div>
                            <div class="form-group col-md-6">
                                <label for="id_card">身份证号码</label>
                                <input type="text" placeholder="身份证号码" class="form-control"
                                       id="id_card" name="id_card" lay-verify="identity" autocomplete="off" >
                            </div>
                            <div class="form-group col-md-6">
                                <label for="remark"><font color="red">*</font>用户权限</label>
                                <select lay-filter="house1" id="remark" name="remark" lay-verify="required" lay-search="" style="width: 100px">
                                    <option value="">请选择</option>
                                    <option value="学生">学生</option>
                                    <option value="辅导员">辅导员</option>
                                    <option value="宿管">宿管</option>
                                    <option value="高级管理员">高级管理员</option>
                                </select>
                            </div>
                            <div class="layui-form-item">
                                <div style="margin-left: 465px" class="layui-input-block">
                                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">注册</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    <input type="hidden" id="msg" th:value="${message}" >
                                    <!--<br>
                                    <h3 style="text-align: center;color: green" th:text="${message}"></h3>-->
                                </div  >

                            </div>
                            <br>

                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

<!-- /Back to Top -->
<!-- Jquery Library-->
<script th:src="@{/js/jquery-3.2.1.min.js}"></script>
<!-- Popper Library-->
<script th:src="@{/js/popper.min.js}"></script>
<!-- Bootstrap Library-->
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- Datatable  -->
<script th:src="@{/datatable/jquery.dataTables.min.js}"></script>
<script th:src="@{/datatable/dataTables.bootstrap4.min.js}"></script>
<!-- Custom Script-->
<script th:src="@{/js/custom.js}"></script>
<script th:src="@{/js/custom-datatables.js}"></script>

<script th:inline="javascript" >

    layui.use(['form','jquery','layer'], function(){
        var layer = layui.layer
            ,form = layui.form
            ,$= layui.$;
        form.verify({
            username: function(value, item){
                if(!new RegExp("^[\u4e00-\u9fa5\]+$").test(value)){
                    return '姓名只能是中文';
                }
            }
            ,pwd: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            ,email: [
                /(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
                ,'邮箱格式不正确'
            ]
            ,identity: [
                /(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/
                ,'请输入正确的身份证号'
            ]
        });
        form.verify({
            confirmPass: function (value) {
                if ($('input[name=user_pwd]').val() !== value)
                    return '两次密码输入不一致！';
            }
        });
        form.verify({
            isExist: function(value) {
                var bool;
                $.ajax({
                    url: "/login/isExist",
                    dataType: 'json',
                    type: "post",
                    async: false,
                    data: {"user_name": value},
                    success: function (data) {
                        bool = data;
                    },
                });
                if (true == bool.isexist) {
                    return '用户名已存在';
                }
            }
        });
        });

    onload=function(){
        var msg =  $("#msg").val();
        if (msg){
            alert(msg);
        }

    };
</script>


</body>
</html>